<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style lang="scss">
h1 {
  color: #fff;
}

body {
  .el-message-box {
    display: inline-block;
    width: 420px;
    padding-bottom: 10px;
    vertical-align: middle;
    background-color: #161836;
    border-radius: 4px;
    border: 1px solid #161836;
    font-size: 18px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    text-align: left;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .el-message-box__title {
    color: #85899c;
  }
  .el-message-box__message p {
    color: #85899c;
  }
  .el-message-box__close {
    color: #85899c;
  }
  .el-button--default {
    background-color: #161836;
    font-size: 14px;
    padding: 8px 16px;
    color: #85899c;
    border: 1px solid #85899c;
  }

  .el-button--primary {
    padding: 8px 16px;
    font-size: 14px;
    background-color: #44abf5;
    border: 1px solid #44abf5;
    color: #fff;
  }
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100vh;
  .Rolemg .dialogSec .el-form,
  .Notnotified .dialogSec .el-form,
  .Notified .dialogSec .el-form {
    min-width: 40vw;
  }
  .Alldevicelist .dialogSec .el-form {
    min-width: 15vw;
  }
  .dialogSec {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    opacity: 0;
    > .el-form {
      background-color: #161836;
      .el-form-item {
        margin-left: -4%;
      }
      .el-form-item__label {
        color: #85899c;
        font-size: 16px;
        line-height: 40px;
      }
      .el-input__inner {
        background-color: #161836;
        height: 40px;
        color: #fff;
        border: 1px solid #85899c;
      }
      section {
        padding: 8px 16px;
        &.title {
          background-color: #1f2e49;
          position: relative;
          h3 {
            font-size: 18px;
            color: #fff;
          }
          i {
            position: absolute;
            top: 50%;
            height: 20px;
            right: 16px;
            font-size: 16px;
            margin-top: -10px;
            color: #fff;
            font-weight: 900;
          }
        }
        &.top {
          margin: 0;
          padding: 16px 16px 8px;
        }
        &.foot {
          text-align: right;
        }
      }
    }
    &.dialogshow {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      opacity: 1;
      z-index: 10;
    }
  }

  [hidden],
  template {
    display: none;
  }
}

.Menumg {
  > .mainSec {
    .el-tree {
      > .el-tree-node:first-child {
        background: #1f2548;
        color: #fff;
      }
      .el-tree-node__content {
        border-bottom: 1px solid #1f2548;
        padding-top: 16px;
        padding-bottom: 16px;
        background-color: #1f2548;
        color: #fff;
      }
      .custom-tree-node {
        display: flex;
        justify-content: space-around;
        flex: 1;
        .el-button {
          border: 0;
          background: none;
          font-size: 16px;
          padding: 0;
          &.del {
            color: #f35047;
            font-size: 2rem;
          }
          &.change {
            color: #3e93da;
            font-size: 2rem;
          }
        }
      }
    }
  }
  .el-radio__label {
    color: #fff;
  }
}

.Rolemg {
  .ztreeWrap {
    .ico_open,
    .ico_docu,
    .ico_close {
      display: none;
    }
    .ztree li a {
      margin-left: 8px;
      color: #fff;
    }
  }
  .operateWrap .el-checkbox-group {
    > span {
      display: flex;
      flex-direction: column;
      > label {
        padding: 8px 16px 0;
        margin: 0;
        &:nth-child(even) {
          background: #f6f6f6;
        }
        .el-checkbox__label {
          width: 100%;
          text-align: center;
          padding-left: 0;
        }
      }
    }
  }
  .el-checkbox {
    color: #fff;
  }
}

.Onlinedevice {
  > section {
    &.toolTop {
      > .top_right {
        .el-tabs {
          .el-tabs__header {
            .el-tabs__nav {
              .el-tabs__item.is-active {
                background-color: #80b5e8;
                color: #fff;
                font-size: 18px;
                border-bottom-color: #80b5e8;
              }
              .el-tabs__item.is-active {
                &:nth-child(1) {
                  color: #fff;
                  border-top-left-radius: 5px;
                  border-bottom-left-radius: 5px;
                }
              }
              .el-tabs__item.is-active {
                &:nth-child(2) {
                  color: #fff;
                }
              }
              .el-tabs__item.is-active {
                &:nth-child(3) {
                  color: #fff;
                  border-top-right-radius: 5px;
                  border-bottom-right-radius: 5px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.MyData {
  padding-right: 20px;
  > section {
    &.part1_wrap {
      .el-card__header {
        padding: 0;
        align-items: center;
        .el-input--mini {
          width: 100px;
        }
      }
      .el-card__body {
        flex: 1;
        display: flex;
        overflow: auto;
        .item {
          flex: 1;
          display: flex;
          .pic_wrap {
            height: 32vh;
            width: 100%;
            display: inline-block;
            canvas {
              position: absolute !important;
              top: -20% !important;
              left: -4% !important;
              width: 1063px !important;
              height: 410px !important;
              border: 1px solid #9da4af;
            }
          }
        }
      }
    }

    &.part2_wrap {
      .el-card__header {
        padding: 0;
        align-items: center;
        .el-input--mini {
          width: 100px;
        }
      }
      .el-card__body {
        flex: 1;
        display: flex;
        overflow: auto;
        .item {
          flex: 1;
          display: flex;
          .pic_wrap {
            height: 32vh;
            width: 100%;
            display: inline-block;
          }
        }
      }
    }
  }
}

.Mydevice {
  > section {
    &.part_wrap {
      .el-card__body {
        flex: 1;
        display: flex;
        overflow: auto;
        .item {
          flex: 1;
          display: flex;
          .pic_wrap {
            height: 15vh;
            width: 50%;
            display: inline-block;
          }
        }
      }
    }
  }
}

.Deviceset {
  .el-collapse {
    background-color: #1f2548;
    border: 1px solid #1f2548;
    margin-top: 20px;
  }
  .coll_wrap {
    .el-collapse-item__header {
      background-color: #1f2548;
      border: 1px solid #1f2548;
      padding: 0 24px;
      font-size: 16px;
      font-weight: bold;
      color: #909399;
    }
    .el-collapse-item__wrap {
      padding: 0 24px;
      background-color: #161836;
      border-bottom: #161836;
      color: #909399;
      .el-collapse-item__content {
        ol,
        ul {
          display: flex;
          justify-content: space-between;
          color: #9da4af;
          margin-top: 1%;
        }
        ul {
          &:nth-child(odd) {
            color: #85899c;
            background-color: #1a1e3e !important;
            height: 30px;
            line-height: 30px;
          }
        }
        ul {
          &:nth-child(even) {
            color: #85899c;
            line-height: 30px;
            height: 30px;
            background-color: #161836 !important;
          }
        }
      }
    }
  }
}
/*表格样式覆盖*/
.Onlinedevicelist,
.Alldevicelist,
.Abnormallist,
.Deviceabnormal,
.Usermg,
.Rolemg,
.Exceptionreport,
.Runningreport,
.Userreport,
.Sysreport,
.Notnotified,
.Picturelist,
.Videolist,
.Userdevicegrant,
.Notified,
.Mydevice,
.Medevicemap,
.Mapabn,
.Onlinemap {
  .main_table {
    .el-table::before {
      background-color: #161836 !important;
    }
    .el-table__body tr {
      &:nth-child(odd) {
        color: #85899c;
        background-color: #161836 !important;
      }
    }
    .el-table__body tr {
      &:nth-child(even) {
        color: #85899c;
        background-color: #1a1e3e !important;
      }
    }
    .el-table__body tr:hover > td {
      background-color: #2c6195 !important;
      color: #fff;
    }
    .el-table__body tr.current-row > tr {
      background-color: #2c6195 !important;
      color: #fff;
    }
    .el-table td,
    .el-table th.is-leaf {
      border-bottom: none;
    }
    .el-pagination {
      .btn-prev {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        height: 30px;
      }
      .el-pager {
        li {
          height: 30px;
          line-height: 30px;
        }
      }
      .btn-next {
        height: 30px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
      }
    }
    .el-table__empty-block {
      background-color: #161836 !important;
      span {
        color: #85899c;
      }
    }
  }
}
/*表单覆盖*/
.Devicelist,
.MedeviceList,
.Previewlistabn,
.Deviceabnormal,
.Usermg,
.Rolemg,
.Exceptionreport,
.Runningreport,
.Userreport,
.Sysreport,
.Modifypass,
.Notnotified,
.Picturelist,
.Videolist,
.Userdevicegrant,
.Mydevice {
  .main {
    .el-form {
      .el-form-item__label {
        color: #fff;
      }
    }
  }
}
</style>
